<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>材料页面</title>
<link rel="stylesheet" href="../../../layui/css/layui.css" media="all">
<script type="text/javascript" src="../../../res/wzw/js/index.js"></script>
<link rel="stylesheet" href="../../../res/wzw/css/style.css" type="text/css" />
<script type="text/javascript" src="../../../res/wzw/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../../../res/wzw/js/tab.js"></script>
<script type="text/javascript" src="../../../res/mln/getUrlParam.js"></script>
<style>
* {
	margin: 0px;
	margin: 0px;
}

#div0 {
	background: #dddddd;
	width: 76%;
	position: relative;
	left:22%;
}
#div1 {
	position: relative;
	width: 100%;
	height: 120px;
	overflow: hidden;
	box-shadow: 0 0 50px #8e8e8e;
	-webkit-box-shadow: 0 0 50px #8e8e8e;
	-moz-box-shadow: 0 0 50px #8e8e8e;
}
#div1 p {
	position: absolute;
	color: #8e8e8e;
	text-decoration: none;
	top: 120px;
	display: block;
	border: #8e8e8e 1px solid;
	box-shadow: 0 0 5px #8e8e8e;
	-webkit-box-shadow: 0 0 5px #8e8e8e;
	-moz-box-shadow: 0 0 5px #8e8e8e;
	background: #fff;
 filter: alpha(opacity: 30);
	opacity: 0.3;
	font-size: 14px;
	padding: 3px 5px;
	font-family: arial;
}
#div1 a:hover {
 filter: alpha(opacity: 100);
	opacity: 1;
	font-weight: bold;
	font-size: 16px;
}
#div3{
 width:76%;
 height:60%;
 position: absolute;
 left: 270px;
}
</style>
</head>
<body>
<input type="hidden" id="typeId">
<div id="div00">
<div id="div0">
	<div id="div1">
		
	</div>
</div>
<br/>
<div id="div3">
	<div class="demoTable">
	  搜索:
	  <div class="layui-inline">
	    <input class="layui-input" name="matName" id="matName" autocomplete="off" placeholder="输入材料关键字">
	  </div>
	  
	  <button class="layui-btn search" data-type="reload">搜索</button>
	  <span>&nbsp;&nbsp;&nbsp;☆☆&nbsp;&nbsp;&nbsp;</span>
	  <button class="layui-btn adds" id="materialsAdd" data-type="add">立即加入配置</button>
	</div>
	<table class="layui-hide" id="drugMaterials" lay-filter="demo"></table>
</div>
<div id="div4">
	<div id="block">
		<h1 class="h">类型查询</h1>
		<div class="tabs" >
				<ul id="div4-1">
					
				</ul>
		</div>
	</div>
</div>
</div>
 <script type="text/javascript" src="../../../res/js/base.js"></script>
<script src="../../../layui/layui.js"></script>
<script>
layui.use(['laydate','form', 'laypage', 'layer', 'table', 'upload', 'element'], function(){
	  var laydate = layui.laydate //日期
	  ,laypage = layui.laypage //分页
	  ,layer = layui.layer //弹层
	  ,table = layui.table //表格
	  ,upload = layui.upload //上传
	  ,form=layui.form
	  ,element = layui.element; //元素操作
	 
	  
	  //监听Tab切换
	  element.on('tab(demo)', function(data){
	    layer.msg('切换了：'+ this.innerHTML);
	    console.log(data);
	  });
	  //执行一个 table 实例
	  table.render({
	     elem: '#drugMaterials'
	    ,url: getRootPath()+'materials/findAll.action?drugId='+getUrlParam('drugId') //数据接口
	    ,page: true //开启分页
	    ,method:'post'
	    ,cols: [[ //表头
	       {type:'checkbox'}
	      /* ,{field: 'matId', title: '材料ID', width:120, fixed: 'left'} */
	      ,{field: 'typeName', title: '材料类型', width:'23%'}
	      ,{field: 'matName', title: '材料名称', width:'23%'}
	      ,{field: 'matPrice', title: '材料价格', width:'23%'}
	      ,{field: 'matState', title: '材料说明', width:'23%'}
	      /* ,{field: 'time', title: '操作时间', width:200}
	      ,{field: 'isva', title: '是否有效', width:160} */
	    ]]
	  	,id: 'testReload'
	  	,done: function(res){
  		    //如果是异步请求数据方式，res即为你接口返回的信息。
  		    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
  		  	var p=document.getElementsByName("oo");
  			//alert(p.length);
  			for(var i=0; i<p.length; i++){
  				//alert($(p[i]).attr('id'));
  				for(var j=0; j<res.data.length; j++){
  					if($(p[i]).attr('id')==res.data[j].matId){
  						//alert(123);
  						res.data[j]['LAY_CHECKED']='true';
  						var index= res.data[j]['LAY_TABLE_INDEX'];
  	                    $('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
  	                    $('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
  					}
  				} 
  			}
	  	}
	  });
	  table.on('checkbox(demo)', function(obj){
		  // console.log(obj.checked); //当前是否选中状态
		  //var data = obj.data;
		  var checkStatus = table.checkStatus('testReload')
		  ,data = checkStatus.data;
		  //alert(JSON.stringify(data));
		   if(obj.type=="all"){
				var a=layui.table.cache.testReload;
				for(var i=0; i<a.length; i++){
					//alert(a[i].matId);
					 $("#"+a[i].matId).remove();
				};
				for(var i=0;i<data.length;i++){
					 $('#div1').append("<p name='oo' id="+data[i].matId+">"+data[i].matName+"<button onclick='ss(\""+data[i].matId+"\")'>X</button></p>");
				}
			  
		  }else{
			 if(obj.checked){
				var a=layui.table.cache.testReload;
				for(var i=0; i<a.length; i++){
					//alert(a[i].matId);
					 $("#"+a[i].matId).remove();
				};
				for(var i=0;i<data.length;i++){
					$('#div1').append("<p name='oo' id="+data[i].matId+">"+data[i].matName+"<button onclick='ss(\""+data[i].matId+"\")'>X</button></p>");
				}	
			 }else{
				var a=layui.table.cache.testReload;
				for(var i=0; i<a.length; i++){
					//alert(a[i].matId);
					 $("#"+a[i].matId).remove();
				};
				for(var i=0;i<data.length;i++){
					$('#div1').append("<p name='oo' id="+data[i].matId+">"+data[i].matName+"<button onclick='ss(\""+data[i].matId+"\")'>X</button></p>");
				}	
			 }
		  }
		  //var ss=console.log(obj.data); //选中行的相关数据
		  var i = 0;
		  for (i = 0; i < aA.length; i++) {
				aA[i].pause = 1;
				aA[i].time = null;
				initialize(aA[i]);
				aA[i].onmouseover = function() {
					this.pause = 0;
				};
				aA[i].onmouseout = function() {
					this.pause = 1;
				};
		  };
		  //console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
	  });
		//监听工具条
	  table.on('tool(demo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
	    var data = obj.data //获得当前行数据
	    ,layEvent = obj.event; //获得 lay-event 对应的值
	  }); 
	  //条件查询
	  var $ = layui.$;
			  
	  $('.demoTable .search').on('click', function(){
		 var matName = $('#matName');
		 var typeId = $('#typeId');
		 //执行重载
	     table.reload('testReload', {
	       page: {
	         curr: 1 //重新从第 1 页开始
	       }
	       ,where: {
	    	   matName: matName.val(),
	    	   typeId:typeId.val()
	       }
	     });
		 $("#typeId").val("");
		 //$('#matName').val("");
	  });
	  $('#materialsAdd').on('click', function(){
		  var p=document.getElementsByName("oo");
			//alert(p.length);
			var bb="";
			var temp="";
			for(var i=0; i<p.length; i++){
				var temp=$(p[i]).attr('id');
				//alert(temp);
				if(bb==""){
					bb=temp;
				}else{
					bb=bb+","+temp;
				}
			}
			//alert(bb);
			var drugId=getUrlParam('drugId');
			var url = "../../../drugMaterials/addOrDelete.action";
			var data={matIds:bb,drugId:drugId}
			$.post(url,data,function(mes){
				if(mes.num>0){
					layer.msg('下一步,配置数量', {
						  icon: 1,
						  time: 1000 //1秒关闭（如果不配置，默认是3秒）
						}, function(){
							window.location="drugMaterials.html?drugId="+drugId;
					});
				}
			},dataType="JSON");
	  });
	  var url = "../../../materials/findAllType.action";
		$.post(url,null,function(data){
			//alert(data.length);
			for(var i=0;i<data.length;i++){
				$("#div4-1").append("<li><a href='javascript:cx(\""+data[i].matTypeId+"\");' id="+data[i].matTypeId+">"+data[i].matTypeName+"</a></li>");
			}
			//form表单重新渲染
			form.render();
		},dataType="JSON");
		var drugId=getUrlParam('drugId');
		//alert(drugId);
		var url = "../../../drugMaterials/findMatIdByDrugId.action";
		var data={drugId:drugId}
		$.post(url,data,function(mes){
			for(var i=0;i<mes.length;i++){
				$('#div1').append("<p name='oo' id="+mes[i].matId+">"+mes[i].matName+"<button onclick='ss(\""+mes[i].matId+"\")'>X</button></p>");
				
			}
			var i = 0;
			for (i = 0; i < aA.length; i++) {
				aA[i].pause = 1;
				aA[i].time = null;
				initialize(aA[i]);
				aA[i].onmouseover = function() {
					this.pause = 0;
				};
				aA[i].onmouseout = function() {
					this.pause = 1;
				};
			};
			/* for(var i=0; i<mes.length; i++){
				for(var j=0; j<aa.length; j++){
					if(mes[i].matId==aa[j].matId){
						aa[j].LAY_CHECKED=true;
					}
				}
			}  */
			//form表单重新渲染
			form.render();
		},dataType="JSON");
	});
var oDiv = document.getElementById('div1');
var aA = document.getElementsByTagName('p');
setInterval(starmove, 50);

function starmove() {
	for (i = 0; i < aA.length; i++) {
		if (aA[i].pause) {
			domove(aA[i]);
		}
	}
}

function domove(obj) {
	if (obj.offsetTop <= -obj.offsetHeight) {
		obj.style.top = oDiv.offsetHeight + "px";
		initialize(obj);
	} else {
		obj.style.top = obj.offsetTop - obj.ispeed + "px";
	}
}

function initialize(obj) {
	var iLeft = parseInt(Math.random() * oDiv.offsetWidth);
	var scale = Math.random() * 1 + 1;
	var iTimer = parseInt(Math.random() * 1500);
	obj.pause = 0;

	obj.style.fontSize = 12 * scale + 'px';

	if ((iLeft - obj.offsetWidth) > 0) {
		obj.style.left = iLeft - obj.offsetWidth + "px";
	} else {
		obj.style.left = iLeft + "px";
	}
	clearTimeout(obj.time);
	obj.time = setTimeout(function() {
		obj.pause = 1;
	}, iTimer);
	obj.ispeed = Math.ceil(Math.random() * 4) + 1;
}
/* window.onload = function() {
	var i = 0;
	for (i = 0; i < aA.length; i++) {
		aA[i].pause = 1;
		aA[i].time = null;
		initialize(aA[i]);
		aA[i].onmouseover = function() {
			this.pause = 0;
		};
		aA[i].onmouseout = function() {
			this.pause = 1;
		};
	}
};  */
function cx(obj){
	//alert(123);
	$("#typeId").val(obj);
	$(".search").click();
}

function ss(obj){
	$("#"+obj).remove();
	layui.table.reload("testReload");
	/* alert(layui.table.cache.testReload);
	var a=layui.table.cache.testReload;*/
	
}
</script>
</body>
</html>